<template>
  <div>
    <el-row>
      <el-col :span="11.5" align='left'>
        <vxe-table border resizable show-overflow highlight-hover-row highlight-current-row ref="xTable" :data="tableData" size="small" :loading="加载中" width='620' cell-click="显示区服" @current-change="选择行事件"> //@edit-closed="editClosedEvent"
          <vxe-table-column type="seq" width="30"></vxe-table-column>
          <vxe-table-column title="分配" width="60">
            <template #default="{ row }">
              <showSelect v-model:number="row.账号开关" @click="上传_账号开关" @change="保存修改(row)"></showSelect>
            </template>
          </vxe-table-column>
          <vxe-table-column field="账号" title="账号" width="150"></vxe-table-column>
          <vxe-table-column field="密码" title="密码" width="120"></vxe-table-column>
          <vxe-table-column field="登录状态" title="登录状态" width="120"></vxe-table-column>
          <vxe-table-column title="多区" width="160">
            <template #default="{row}">
              {{row.已选区 + '/' + row.总数区}}
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="11.5">
        <xszhxqf v-model:账号="显示区服_选中的中账号"></xszhxqf>
      </el-col>

    </el-row>

  </div>

</template>

<script>
import xszhxqf from "./显示账号下区服.vue";
import showSelect from "../分配开关显示";
export default {
  components: { xszhxqf, showSelect },
  data() {
    return {
      加载中: true,
      显示区服_选中的中账号: null,
      tableData: [],
    };
  },
  methods: {
    显示区服(row) {
      console.log(row);
    },

    选择行事件({ row }) {
      console.log(row);
      this.显示区服_选中的中账号 = row.账号;
    },
    刷新() {
      this.tableData = [];
      this.加载中 = true;
      let T = this;
      this.$请求(
        "/device/allAccounts",
        {
          设备序列号: this.设备序列号, //"IMEXX", //1, //this.账号,
        },
        function (data) {
          console.log(data);
          console.log(data.data);
          T.加载中 = false;
          T.tableData = data.data;
          if (T.tableData.length > 0) {
            T.显示区服_选中的中账号 = T.tableData[0].账号;
          }
        }
      );
    },
    保存修改(row) {
      this.加载中 = true;
      let T = this;
      this.$请求(
        "/update/rootnumber/info",
        {
          账号: row.账号,
          账号开关: row.账号开关,
        },
        function (data) {
            T.刷新()
        }
      );
    },
  },
  created() {
    this.刷新();
  },
  watch: {
    设备序列号() {
      this.刷新();
    },
  },
  props: ["设备序列号"],
};
</script>

<style>
</style>